<template>
	<view class="">
		<image class="product_banner" src="../../static/image/mine/index/banner.png" mode=""></image>
		<view class="seckill_time">
			<view class="haveseckill">
				<view class="seckill_time_l">
					<image src="../../static/image/mine/index/logo.png" mode=""></image>
					正在秒杀中
				</view>
				<view class="seckill_time_r">
					距离结束:
					<uni-countdown
					:show-day="false" 
					:hour="12" 
					:minute="12" 
					:second="12"></uni-countdown>
				</view>
			</view>
		
		<!-- 	<view class="haveseckill">
				<view class="seckill_time_l">
					<image src="../../static/image/mine/index/logo.png" mode=""></image>
					暂无秒杀
				</view>
				<view class="seckill_time_r">
					距离下一场秒杀:
					<uni-countdown 
					:show-day="false" 
					:hour="12" 
					:minute="12" 
					:second="12"></uni-countdown>
				</view>
			</view> -->
		</view>
		<!-- 新的秒杀背景 -->
		<view class="newSeckill">
			<image src="../../static/image/mine/new/cutdown_banner.png" mode=""></image>
			<view class="newSeckill_content">
				<view class="newSeckill_content_l">
					<image src="../../static/image/mine/index/logo.png" mode=""></image>
					正在秒杀中
				</view>
				<view class="newSeckill_content_r">
					<view class="title">
						距离结束时间
					</view>
					<uni-countdown
					:day="1" 
					:hour="12" 
					:minute="12" 
					:second="12"></uni-countdown>
				</view>
			</view>
		</view>
		<sec-kill @toproductdetail = "toproductdetail"></sec-kill>
	<!-- 	<view class="nonseckill">
			<image src="../../static/image/mine/index/noseckill.png" mode=""></image>
			<view class="nonseckill_wz">
				暂无秒杀活动哦
			</view> 
		</view> -->
	</view>
</template>

<script>
	import secKill from '@/components/seckill/seckill.vue'
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	export default {
		components:{
			secKill,
			uniCountdown
		},
		data () {
			return {
				hour: 12,
			}
		},
		methods: {
			toproductdetail (index) {
				uni.navigateTo({
					url: '/pageB/classify/productdetail?id='+index+'&type=' + '1'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.product_banner {
		width: 100%;
		height: 300upx;
	}
	.seckill_time {
		width: calc(100% - 30upx);
		margin: 20upx auto;
		height: 80upx;
		background: linear-gradient(to right,#f73e2f 0%,#fc5c2f 100%);
		box-shadow: 0 0 6upx 0 #fc5c2f;
		border-radius: 10upx;
		padding: 0 15upx;
		box-sizing: border-box;
		.haveseckill {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.seckill_time_l {
			font-size: 36upx;
			color: #FFFFFF;
			font-weight: bold;
			display: flex;
			align-items: center;
			image {
				width: 28upx;
				height: 38upx;
				margin-right: 8upx;
			}
		}
		.seckill_time_r {
			display: flex;
			align-items: center;
			font-size: 28upx;
			color: #FFFFFF;
			line-height: 48upx;
		}
	}
	.newSeckill {
		width: 100%;
		height: 120upx;
		position: relative;
		image {
			width: 100%;
			height: 100%;
		}
		.newSeckill_content {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:0 15upx;
			box-sizing: border-box;
		}
		.newSeckill_content_l {
			display: flex;
			align-items: center;
			font-size: 28upx;
			color: #FFFFFF;
			image {
				width: 28upx;
				height: 38upx;
				margin-right: 8upx;
			}
		}
		.newSeckill_content_r {
			width: 250upx;
			height: 120upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.title {
				font-size: 24upx;
				color: #f73e2f;
			}
		}
	}
	.nonseckill {
		width: 100%;
		image {
			display: block;
			width: 191upx;
			height: 176upx;
			margin: auto;
			margin-top: 100upx;
		}
		.nonseckill_wz {
			margin-top: 40upx;
			text-align: center;
			font-size: 28upx;
			color: #999999;
		}
	}
</style>
